<template>
	<div class="online-list table-theme">
		<head-title title="用户在线列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="list" >
				
				<el-table-column label="用户名" align="center" prop="users.nickname"></el-table-column>
				<el-table-column label="用户ID" align="center" prop="users.user_id"></el-table-column>
				<el-table-column label="头像" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.users.heard_img"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="店铺ID" align="center" prop="users.store_id"></el-table-column>
				<el-table-column label="店铺名" align="center" prop="users.store_name"></el-table-column>
				<el-table-column label="上级ID" align="center" prop="users.belong_refer"></el-table-column>
				<el-table-column label="业绩员" align="center" prop="users.service_name"></el-table-column>
				<el-table-column label="招商员" align="center" prop="users.attract_name"></el-table-column>
				<el-table-column label="身份" align="center" prop="">
					<template slot-scope="scope">
						<p>{{ roleText[scope.row.users.role_type] }}</p>
					</template>
				</el-table-column>
				<el-table-column label="端口" align="center" prop="users.client"></el-table-column>
				<el-table-column label="操作" align="center" width="120">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="seeFoot(scope.row.users.user_id)">查看足迹</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>

	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
export default {
	components: {
		ImgPopover
	},
	data() {
		return {
			list: [],
			total: 0,
			page: 0,
			roleText: ['', '用户', '商户', '分销员', '导购员/二级分销商', '业绩', '招商', '工厂', '仓库', '外部工厂', '商家财务']
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
			};
			
			this.$http(this.$ApiList.online,data).then(res => {
				this.list = res.datas;
				this.total = res.count;
			});
		},
		refreshPage() {
			this.page = 1;
			this.init();
		},
		seeFoot(user_id){
			this.$router.push({path:'/foot_details',query:{id:user_id}})
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>
.online-list {
	
}
</style>
